<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画测试</title>
    <link rel="stylesheet" href="/css/animate.min.css">
    <style>
        body {
            padding: 50px;
            font-family: Arial, sans-serif;
        }

        .test-element {
            width: 200px;
            height: 100px;
            background: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
            border-radius: 8px;
        }

        button {
            padding: 10px 20px;
            margin: 10px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>Animate.css 测试</h1>

    <div id="testElement" class="test-element">测试元素</div>

    <button onclick="testBounce()">弹跳动画</button>
    <button onclick="testFadeIn()">淡入动画</button>
    <button onclick="testSlideIn()">滑入动画</button>
    <button onclick="testZoomIn()">缩放动画</button>
    <button onclick="removeAnimation()">移除动画</button>

    <script>
        const element = document.getElementById('testElement');

        function removeAnimation() {
            element.classList.remove('animate__animated');
            element.classList.forEach(cls => {
                if (cls.startsWith('animate__')) {
                    element.classList.remove(cls);
                }
            });
            console.log('移除动画类，当前类:', element.classList.toString());
        }

        function testBounce() {
            removeAnimation();
            element.classList.add('animate__animated', 'animate__bounce');
            element.style.setProperty('--animate-duration', '1s');
            element.style.setProperty('--animate-delay', '0s');
            element.classList.add('animate__repeat-1');
            console.log('添加弹跳动画，当前类:', element.classList.toString());
        }

        function testFadeIn() {
            removeAnimation();
            element.classList.add('animate__animated', 'animate__fadeIn');
            element.style.setProperty('--animate-duration', '1s');
            element.style.setProperty('--animate-delay', '0s');
            element.classList.add('animate__repeat-1');
            console.log('添加淡入动画，当前类:', element.classList.toString());
        }

        function testSlideIn() {
            removeAnimation();
            element.classList.add('animate__animated', 'animate__slideInLeft');
            element.style.setProperty('--animate-duration', '1s');
            element.style.setProperty('--animate-delay', '0s');
            element.classList.add('animate__repeat-1');
            console.log('添加滑入动画，当前类:', element.classList.toString());
        }

        function testZoomIn() {
            removeAnimation();
            element.classList.add('animate__animated', 'animate__zoomIn');
            element.style.setProperty('--animate-duration', '1s');
            element.style.setProperty('--animate-delay', '0s');
            element.classList.add('animate__repeat-1');
            console.log('添加缩放动画，当前类:', element.classList.toString());
        }
    </script>
</body>

</html>